<template>
    <el-dialog :center="false" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true"
               title="编辑快捷菜单"
               top="20px" v-model="shortcutVisible" width="80%">
        <el-row>
            <el-col :span="24">
                <el-table
                        :data="permissionMenuList"
                        :row-key="rowClassName"
                        @select-all="handleSelectAll"
                        @selection-change="handleSelectionChange"
                        border
                        fit="true"
                        highlight-current-row="true"
                        ref="multipleTable"
                >
                    <el-table-column
                            :reserve-selection="true"
                            align="center"
                            type="selection"
                    />
                    <el-table-column
                            label="菜单名称"
                            prop="menuName"
                    />
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <el-button @click="batchMerge()" size="small" type="primary">
                    <font-awesome-icon icon="save" style="vertical-align: middle;color:#e3e9f2;"/>
                    <span style="vertical-align: middle;">  提交 </span></el-button>
            </el-col>
        </el-row>

    </el-dialog>
    <div class="header">
        <div :title="systemName" class="logo">
            <font-awesome-icon icon="star" style="vertical-align:middle;color: #e3e9f2;"/>
            <font-awesome-icon icon="horse" style="vertical-align:middle;color: #e3e9f2;font-size: 22px"/>
        </div>

        <div class="header-left">
            <ul>
                <template v-for="item in systemList">
                    <li :title="item.sysName" @click="loadMenus(item.idInformations)">
                        <font-awesome-icon :icon="item.sysLogo"
                                           style="color: #e3e9f2"></font-awesome-icon>&nbsp;&nbsp;<span>{{item.sysName}}</span>
                    </li>
                </template>
            </ul>
        </div>

        <div class="header-right">
            <div class="search">
                <el-input placeholder="请输入关键字" v-model="keyword" v-on:keyup.enter="operSearch">
                    <template #prefix>
                        <el-icon>
                            <search/>
                        </el-icon>
                    </template>
                </el-input>
            </div>
            <div class="user-info">
                <span style="width: 40%; float: left;padding-top:2px;">
                    <font-awesome-icon icon="bullhorn" style="vertical-align:middle;color: #e3e9f2;font-size: 22px"/>
                    <el-badge :value="1" class="mark"/>
                 </span>
                <locale/>
                <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      <font-awesome-icon icon="user-tie" style="vertical-align:middle;color: #e3e9f2;font-size: 28px"/>
    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item style="border-bottom: 1px silver solid">
                                <span>{{this.loginUser.name}}</span>
                                <p>{{this.loginUser.userName}}</p>
                            </el-dropdown-item>
                            <el-dropdown-item class="clearfix">
                                <font-awesome-icon icon="shield-alt"/>
                                个人权限
                            </el-dropdown-item>
                            <el-dropdown-item class="clearfix">
                                <font-awesome-icon icon="user-edit"/>
                                修改个人信息
                            </el-dropdown-item>
                            <el-dropdown-item @click="loginOut" class="clearfix">
                                <font-awesome-icon icon="sign-out-alt"/>
                                退出
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="shortcut">
        <ul class="shortcut_ul">
            <li @click="menuBarFun" title="展开/隐藏菜单">
                <font-awesome-icon :icon="menuIcon"/>
            </li>
            <template v-for="item in shortcutMenuList">
                <li :title="item.menuName">
                    <router-link :to="{path:item.menuPath}">{{item.menuName}}</router-link>
                </li>
                <li style="width: 1px;cursor: none;color: #707070">|</li>
                <!-- <li style="background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;"></li>-->
            </template>

            <li @click="addShortcutMenu" title="添加快捷菜单">
                <font-awesome-icon icon="plus"/>
            </li>
        </ul>
    </div>
</template>

<script>
    import {ref} from "vue"
    import {Search} from '@element-plus/icons'
    import {ElMessageBox} from "element-plus";
    import {mapGetters} from "vuex";
    import {getUserInfo} from "../utils/auth";
    import Config from "../settings"
    import Locale from "./Locale";
    import {postRequest} from "../api/star_horse";
    import {error, success, warning} from "../utils/message";

    export default {
        name: "AppHeader",
        props: ["isCollapse"],
        components: {Locale, Search},
        computed: {
            ...mapGetters(["getUserInfo", "getPermissionMenus"])
        },
        data() {
            return {
                keyword: ref(''),
                menuIcon: "angle-double-right",
                systemList: [],
                permissionMenuList: [],
                shortcutMenuList: [],
                multipleSelection: [],
                shortcutVisible: false,
                systemName: Config.title,
                loginUser: getUserInfo()
            }
        },

        created() {
            let query = [];
            let that = this;
            query.push({
                "propertyName": "isDel",
                "value": 0,
            });
            query.push({
                "propertyName": "statusCode",
                "value": 1,
            });
            // postRequest("system-config/system/informationsEntity/getAllByCondition", query).then((res) => {
            //     that.systemList = res.data.data;
            // }).catch(err => {
            //     console.log(err);
            // });
            this.loadShortMenu();

        },
        methods: {
            loadShortMenu() {
                let param = [], that = this;
                param.push({
                    "propertyName": "idUsersinfo",
                    "value": that.loginUser.idUsersinfo,
                })
                // postRequest("system-config/system/shortcutMenu/getAllByCondition", param).then(res => {
                //     that.shortcutMenuList = res.data.data;
                // }).catch(err => {
                //     console.log(err);
                // })
            },
            batchMerge() {
                let that = this;
                let dataList = [];
                if (that.multipleSelection) {
                    that.multipleSelection.forEach(item => {
                        dataList.push({
                            idUsersinfo: that.loginUser.idUsersinfo,
                            menuName: item.menuName,
                            menuPath: item.menuPath
                        });
                    })
                }
                if (dataList.length > 10) {
                    warning("最多只能设置10个快捷菜单");
                    return;
                }
                // postRequest(`/system-config/system/shortcutMenu/mergeBatch/${that.loginUser.idUsersinfo}`, dataList).then(res => {
                //     success(res.data.cnMessage);
                //     that.shortcutVisible = !that.shortcutVisible;
                //     that.multipleSelection = [];
                //     that.loadShortMenu();
                // }).catch(err => {
                //     error(err);
                // }).finally(() => {
                //     // that.closeLoad();
                // })
            },
            //处理全部选中
            handleSelectAll(val) {
                this.multipleSelection = val;
            },
            //处理选中的数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            rowClassName(row) {
                return row.menuPath;
            },
            addShortcutMenu() {
                let that = this;
                that.shortcutVisible = !that.shortcutVisible;
                let datas = that.getPermissionMenus;
                that.permissionMenuList = [];
                datas.forEach(item => {
                    that.permissionMenuList.push({
                        menuName: item.meta.title,
                        menuPath: item.path
                    })
                });
                //在手动设置选中前,一定要先做清除选中,否则会出现很多重复被选中的情况
                that.$refs.multipleTable.clearSelection()
                that.shortcutMenuList.forEach(item => {
                    that.$refs.multipleTable.toggleRowSelection(item, true);
                });

            },
            loginOut() {
                let that = this;
                ElMessageBox.confirm("是否确认退出系统?", "警告", {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    that.$store.dispatch("logOut", that.userInfo || {}).then(() => {
                        that.$router.push({path: "/login"})
                    });
                });
            },
            menuBarFun() {
                this.$emit('collopseOperation');
            },
            changeArrow() {
                this.menuIcon = this.menuIcon == "angle-double-right" ? "angle-double-left" : "angle-double-right";
            },
            loadMenus(sysemId) {
                this.$emit("loadMenus", sysemId);
            },
            operSearch() {
                alert(this.keyword);
            }
        },
        watch: {
            isCollapse: function (val) {
                this.changeArrow();
            }
        }
    }
</script>

<style scoped>
    .el-avatar {
        margin-top: -10px;
    }

    .el-icon {
        font-size: 26px;
        margin-top: 7px;
    }

    .header {
        height: 50px;
        width: 100%;
        background: #409eff;
        /*padding: 16px 36px 15px 30px;*/
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        box-sizing: border-box;
        float: left;
    }

    .header .header-left {
        width: 65%;
        float: left;
    }

    .header .header-left ul {
        list-style: none;
        margin-left: 0px;
        padding-left: 0px;
    }

    .header .header-left ul li {
        float: left;
        height: 30px;
        margin-top: 5px;
        display: block;
        width: 120px;
        cursor: pointer;
    }

    .header .header-left ul li span {
        color: #f7f7f7;
    }

    .header .header-right {
        width: 35%;

        height: 100%;
        float: left;
    }

    ::v-deep .el-input--prefix .el-input__inner {
        padding-left: 35px;
    }

    .header .header-right .search {
        width: 55%;
        margin-top: 5px;
        float: left;
    }

    .el-dropdown-menu > .el-dropdown-menu__item:first-child {
        border-bottom: 1px solid silver;
    }

    .header .header-right .user-info {
        width: 43%;
        float: left;
        text-align: right;
        margin-top: 10px;
        cursor: pointer;
    }

    .shortcut {
        height: 40px;
        background: #3a8ee6;
        -webkit-box-shadow: 0 2px 10px 0 rgba(75, 61, 89, 0.3);
        box-shadow: 0 2px 10px 0 rgba(75, 61, 89, 0.3);
        border-top: 1px solid hsla(13, 23%, 73%, 10);
        box-sizing: border-box;
    }

    .shortcut_ul {
        width: 100%;
        height: 100%;
        display: block;
        float: left;
        text-align: left;
        margin-left: 0px;
        padding-left: 0px;
    }

    .shortcut_ul li {
        float: left;
        display: block;
        vertical-align: middle;
        font-size: 14px;

        cursor: pointer;
        color: #ffffff;
        padding-top: 8px;
        margin-left: 15px;
        text-align: center;
        height: inherit;
    }

    .shortcut_ul li > a {
        float: left;
        display: block;
        vertical-align: middle;
        font-size: 14px;
        cursor: pointer;
        color: #ffffff;
        text-align: center;
        height: inherit;
    }

    /* .shortcut_ul li{background:linear-gradient(to top,#dd2926,#a82724,#dd2926) no-repeat right / 2px 30px;}*/

    .shortcut_ul li:first-child {
        font-size: 23px;
        color: #ffffff;
        margin-left: 0px;
        box-shadow: 0 2px 10px 0 rgba(75, 61, 89, .3);
        box-sizing: border-box;
        padding-top: 5px;
        width: 50px;
    }

    .shortcut_ul li:last-child {
        font-size: 18px;
        color: #e3e9f2;
        box-shadow: 0 2px 10px 0 rgba(75, 61, 89, .3);
        box-sizing: border-box;
        padding-top: 8px;
    }
</style>